<template>
  <div class="padding-lr20 rem-32px">
    <div
      class="flex justify-between padding-tb20 align-center border-bottom"
      @click="$router.push({name: 'setup-avatar'})"
    >
      <div>头像</div>
      <div class="flex c-66 align-center">
        <img class="cover_img" v-if="user.head_img" :src="user.head_img" alt />
        <img class="cover_img" v-if="!user.head_img" src="@/assets/img/nologin.png" alt />
        <i class="iconfont icon-you-copy"></i>
      </div>
    </div>
    <div
      class="flex justify-between line-height-100 border-bottom"
      @click="$router.push({name: 'setup-phone'})"
    >
      <div class="word-all">手机号</div>
      <div class="flex c-66">
        <span>{{user.user_phone}}</span>
        <i class="iconfont icon-you-copy"></i>
      </div>
    </div>
    <div
      class="flex justify-between line-height-100 border-bottom"
      @click="$router.push({name: 'setup-all'})"
    >
      <div>基本资料</div>
      <div class="flex c-66">
        <i class="iconfont icon-you-copy"></i>
      </div>
    </div>
    <div
      class="flex justify-between line-height-100 border-bottom"
      @click="$router.push({name: 'setup-password'})"
    >
      <div>修改密码</div>
      <div class="flex c-66">
        <i class="iconfont icon-you-copy"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: ""
    };
  },
  mounted() {
    document.querySelector('html').style.backgroundColor = "#ffffff";
    this.getUser();
  },
  methods: {
    getUser() {
      this.$axios.post( "/wap/personal/card", {
        token: window.localStorage.getItem("token"),
        type: 1
      }).then(res => {
        this.user = res.data.data.user;
        // console.log(this.user);
      });
    }
  }
};
</script>

<style scoped>
.cover_img {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
}
.iconfont {
  font-size: 0.28rem;
  color: #666;
}
.icon-you-copy {
  margin-left: 0.1rem;
}
</style>